<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider Test Page</title>
<script src="../../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../../themes/default/ui.all.css" type="text/css" charset="utf-8" />
<script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/ui.slider.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.core.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.blind.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.bounce.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.clip.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.drop.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.explode.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.fold.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.pulsate.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.scale.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.shake.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.slide.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../ui/effects.transfer.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="all">
#wrap {
	width: 900px;
	margin: 0 auto;
}
#col-1 {
	width: 220px;
	border: 1px solid #ccc;
	padding: 20px;
	float: left;
}
#col-2 {
	width: 500px;
	float: left;
}
#col-2 div {
	width: 100px;
	height: 100px;
	background: #ccc;
	border: 1px solid #000;
	margin: 20px;
	float: left;
	text-align: center;
	font-size: 150%;
}
.label-1 { position: absolute; left: 0; top: -1.1em; }
.label-2 { position: absolute; right: 0; top: -1.1em; }
</style>
</head>
<body>
<div id="wrap">
	<h1>Slider Interface Example</h1>
	<div id="col-1">
		<div id="slider1" class="ui-slider-2">
			<div class="ui-slider-handle"></div>
			<div class="ui-slider-handle"></div>
			<span class="label-1">0</span>
			<span class="label-2">100</span>
		</div>
		<br />
		<select id="effects">
			<option>fade</option>
			<option>drop</option>
			<option>fold</option>
			<option>highlight</option>
			<option>explode</option>
			<option>slide</option>
			<option>clip</option>
			<option>shake</option>
			<option>scale</option>
			<option>pulsate</option>
			<option>bounce</option>
		</select>
	</div>

	<div id="col-2">
		<div>0</div>
		<div>10</div>
		<div>20</div>
		<div>30</div>
		<div>40</div>
		<div>50</div>
		<div>60</div>
		<div>70</div>
		<div>80</div>
		<div>90</div>
		<div>100</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$('#slider1').slider({
		stepping: 10,
		min: 0, 
		max: 100,
		range: true,
		change: function(event, ui) {
			var minValue = $('#slider1').slider('value', 0); 
			var maxValue = $('#slider1').slider('value', 1);
			$('#col-2 div').each(function(){
				var value = parseInt($(this).html(), 10);
				if (value < minValue || value > maxValue) {
					var effect = $('#effects').val();
					switch (effect) {
						case 'fade' :
							$(this).fadeOut();
						break;
						case 'drop' :
							$(this).hide('drop', { direction: 'down' });
						break;
						default :
							$(this).hide(effect);
					}
				} else
					$(this).fadeIn();
			});
		},
		handles: [
			{start: 0, min: 0, max: 100},
			{start: 100, min: 0, max: 100}
		]
	});
});
</script>
</body>
</html>
